
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{}} 输出和那值的 ${}-->
            {{name+age}}
            {{ { name: 'tom' } }}name: 'tom'
            {{1>2?3:4}}
            <!-- v-on:事件名="表达式||方法名 -->
            <button v-on:click="num+=1"></button>
            {{num}}
            <button v-on:click="show(num)">{{num}}</button>
            <button @click="show(num)">@</button>
            键盘按下<input type="text" @keydown="keydown">
           
            <div v-text="s2"></div>
            <div v-html="s2"></div>
            <button @click="showif()">测试正反出来</button>
            <span v-if="flag">长沙科泰</span>
            <span v-else>北大清脑</span>
            <span v-show="flag">bdqn</span>

            <font size="5" :class="" v-bind:color="color1">可爱的朱朱</font>
            <font :size="size1" :class="" :color="color2">可爱的朱朱</font>

            双向绑定<input type="text" :value="sx">
            <input type="text" v-model="sx">

            <!-- <ul>
                <li v-for="(xjj11,index) in shuzu" :key="index">
                    {{xjj11}}
                </li>
            </ul> -->
            --------------------------------------
            <ul>
                <li v-for="(xjj,index) in arrays" :key="index">
                    {{xjj.title}}
                </li>
            </ul>
            ---------
             <!-- 计算属性 -->
        死的查询内容<input :value="xx"></input>
        请输入获得双向查询内容
        <input v-model="xx"></input>
        <p>Original message: "{{ xx }}"</p>
        <p>Computed reversed message: "{{ yy }}"</p>
        </div>



        <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js">
        </script>
        <script type="text/javascript">
            new Vue({
                    el:"#app",
                    template: ``,
                    data:function(){
                        return{
                            name:'我爱161',age:33,
                            num:1,s1:'sssss',s2:"<input type='text'>",
                            flag:false,color1:'yellow',color2:'green',size1:33
                            ,sx:'',shuzu:['xx','洛丽塔','jk','校园风']
                            ,houtai:[],arrays: [],xx:'161'
                        }
                    },methods:{
                        show(){
                            alert("点击"+this.num);
                        },keydown(){
                            alert("键盘按下");
                        },showif(){
                            this.flag=!this.flag;
                        }
                    },created:function(){//http://localhost:8080/entry/findEntry161?title=ssm
                        //alert("创建了");
                    }, mounted: function () {//跨域 app
                    var list = axios.get('http://localhost:8080/entry/findEntry161?title=ssm')
                    .then(function (res) {//成功的返回值
                        console.log(res);
                        app.arrays = res.data;
                    }).catch(function (reason) {
                        console.log(reason)
                    });
            }, watch: {//监听
                xx(newval, oldval) {
                    alert("变成了" + newval);
                }
            }, computed: {//计算属性
                yy: function () {
                    return this.xx + "新的";
                }
            }
                    // mounted: function () {// mounted: function () 
                    //     var list = axios.get('http://localhost:8080/entry/findEntry161?title=ssm')
                    // .then(function (res) {//成功的返回值
                    //     console.log(res);
                    //     app.houtai = res.data;
                    // }).catch(function (reason) {
                    //     console.log(reason)
                    // });
                    // }
            });


    </script>
</body>
</html>